<template>
  <el-date-picker
    v-model="data.form[data.attr.prop]"
    type="daterange"
    range-separator="To"
    format="YYYY-MM-DD"
    value-format="YYYY-MM-DD"
    @change="changeDate"
    :disabled-date="disabledDate"
    v-bind="data.attr"
  />
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, onMounted, ref } from 'vue'
import { initState } from '@/components/tableSearch/component/index'
export default defineComponent({
  name: 'DateTime',
  setup(props, ctx) {
    const attrs = ctx.attrs
    const state = reactive<any>({
      data: {
        attr: {},
        form: {}
      }
    })
    onMounted(() => {
      state.data = initState(attrs)
    })
    const panelChange = (date: any) => {
      console.log(date)
    }
    const disabledDate = (time: Date) => {
      return time.getTime() > Date.now()
    }

    const changeDate = (val: any) => {
      if (state.data?.attr?.type.includes('range')) {
        if (val && val.length > 0) {
          state.data.form[state.data.attr.startDt || 'startDt'] = val[0]
          state.data.form[state.data.attr.endDt || 'endDt'] = val[1]
        } else {
          state.data.form[state.data.attr.startDt || 'startDt'] = ''
          state.data.form[state.data.attr.endDt || 'endDt'] = ''
        }
      }
    }
    return {
      disabledDate,
      changeDate,
      panelChange,
      ...toRefs(state)
    }
  }
})
</script>
<style lang="scss" scoped>
:deep(.el-date-editor) {
  width: 100% !important;
}
:deep(.el-input--small .el-input__prefix) {
  left: 0 !important;
}
</style>
